<template>
    <div class="home">
      <div class="section-spacing">
        <el-row>
          <view-top></view-top>
        </el-row>
      </div>
      <!-- 书架部分 -->
      <div style="width: 80%; margin: auto">
        <el-col :span="6" v-for="(book, index) in bookShelf" :key="index">
          <el-card
            :body-style="{ padding: '0px' }"
            style="margin: 0 10px 10px 0; height: 300px"
            @mouseenter.native="hoverIndex = index"
            @mouseleave.native="hoverIndex = -1"
          >
            <div style="padding: 14px" v-if="index != hoverIndex">
              <img :src="book.cover" class="image" />
              <div class="book-title">{{ book.title }}</div>
              <div class="bottom clearfix" v-if="book.lastRead != null">
                <time class="book-last-read-time"
                  >{{ book.lastRead }}/{{ book.chapterTotal }}章</time
                >
              </div>
              <div class="bottom clearfix" v-if="book.lastRead == null">
                <time class="book-last-read-time">未读过</time>
              </div>
            </div>
            <div
              style="padding: 14px"
              class="book-hover-info"
              v-if="index == hoverIndex"
            >
              <div style="text-align: left; font-size: 18px; display: flex; justify-content: space-between;">
                <span>{{ book.title }}</span>
                <span style="cursor: pointer;">
                  <i class="el-icon-circle-close" @click="deleteFromShell(index)" />
                </span>
              </div>
              <div @click="jumpToBook(bookShelf[index])" style="cursor: pointer;">
                <el-row
                style="margin-top: 20px; text-align: left"
                class="bottom clearfix"
                >
                  <div v-if="book.lastRead != null">
                    <el-col :span="10">
                      <time class="time book-last-read"
                        >读到{{ book.lastRead }}</time
                      >
                    </el-col>
                  </div>
                  <div v-if="book.lastRead == null">
                    <el-col :span="10">
                      <time class="time book-last-read">未读过</time>
                    </el-col>
                  </div>
                  <div v-if="book.lastRead != null">
                    <el-col :span="8">
                      <time class="time book-last-read-time">{{
                        book.lastReadTime
                      }}</time>
                    </el-col>
                  </div>
                  <div v-if="book.lastRead == null">
                    <el-col :span="8">
                      <time class="time book-last-read-time">未读过</time>
                    </el-col>
                  </div>
                  <el-col :span="6">
                    <time class="time book-added-time">{{ book.addedTime }}</time>
                  </el-col>
                  </el-row>
                  <el-row
                    style="font-size: 10px; margin-top: 10px; text-align: left"
                    class="bottom clearfix"
                  >
                  <el-col :span="10">
                    <time class="time1">{{ book.chapterTotal }}章</time>
                  </el-col>
                  <div v-if="book.lastRead != null">
                    <el-col :span="8">
                      <time class="time1">阅读过</time>
                    </el-col>
                  </div>
                  <div v-if="book.lastRead == null">
                    <el-col :span="8">
                      <time class="time1" v-html="'\u00a0'"></time>
                    </el-col>
                  </div>
                  <el-col :span="6">
                    <time class="time1">加入书架</time>
                  </el-col>
                </el-row>
                <!-- <div style="margin-top: 20px; text-align: left;" class="bottom clearfix">
                            <time class="time">读到{{ book.lastRead }}</time>
                        </div> -->
                <p
                  style="text-align: left; margin: 20px 0 0 0"
                  class="book-last-read-content"
                >
                  {{ book.lastReadTitle }}
                </p>
                <p
                  style="text-align: left; margin: 0"
                  class="book-last-read-content"
                >
                  {{ book.lastReadContent }}
                </p>
              </div>
              
            </div>
          </el-card>
        </el-col>
      </div>
    </div>
  </template>
  
  
  
  <script>
  import ViewTop from "./ViewTop.vue";
  import { dateVO } from "@/utils/util/time";
  export default {
    components: {
      ViewTop,
    },
    data() {
      return {
        bookShelf: [],
        hoverIndex: -1,
      };
    },
    mounted() {
      this.searchCollectBooks();
    },
    methods: {
      jumpToBook(shelf){
        var that=this
        var book;
        var chapters;
        var cid=shelf.lastRead;
        if(cid==null)
          cid=1
        this.axios({
          method: "get",
          url: "/user/novel/list?id="+shelf.novelId,
        }).then((res)=>{
          book=res.data.data[0]
          this.axios({
            method: "get",
            url: "/user/chapter/directory?id=" + shelf.novelId,
          }).then((res1) => {
            chapters = res1.data.data;
            this.$router.push({
              path: "/reader",
              query: {
                chapters: JSON.stringify(chapters),
                book: JSON.stringify(book),
                cid: JSON.stringify(cid)
              }
            })
          }).catch((err1) => {
            console.log(err1);
          });
          }).catch((err)=>{
            console.log(err)
        })
      },
      searchCollectBooks(){
        var that = this;
        this.axios({
          method: "get",
          url: "/user/bookShelf/list",
        })
          .then((res) => {
            that.bookShelf = res.data.data;
            console.log(that.bookShelf);
            for (let i = 0; i < that.bookShelf.length; i++) {
              
              that.bookShelf[i].addedTime = dateVO(new Date(that.bookShelf[i].addedTime));
              if (that.bookShelf[i].lastRead == null) {
                that.axios
                  .get(
                    "/user/chapter/listOnly?id=" +
                      that.bookShelf[i].novelId +
                      "&chapterId=" +
                      1
                  )
                  .then((res) => {
                    let chapter = res.data.data;
                    that.bookShelf[i].lastReadTitle = chapter.title;
                    that.bookShelf[i].lastReadContent =
                      chapter.content.substr(0, 100) + "...";
                  })
                  .catch((err) => {
                    console.log(err);
                  });
              } else {
                  that.bookShelf[i].lastReadTime=dateVO(that.bookShelf[i].lastReadTime)
              }
            }
          })
          .catch((err) => {
            console.log(err);
          });
      },
      deleteFromShell(index){
        var that=this
        this.axios({
          method:"delete",
          url:`/user/bookShelf/delete/${that.bookShelf[index].novelId}`,
          }).then((res)=>{
            if(res.data.code==1){
              console.log(res.data)
              that.searchCollectBooks()
            }
          }).catch((err)=>{
            console.log(err)
          })
      },
    },
  };
  </script>
  <style scoped>
  .section-spacing {
    margin-bottom: 20px;
  }
  .image {
    margin-top: 20px;
    width: 120px;
    height: 160px;
  }
  .home {
    padding: 20px;
    /* display: flex; */
    flex-wrap: wrap; /* 允许子元素换行 */
    justify-content: space-between; /* 子元素之间均匀分布 */
  }
  .book-shelf {
    display: flex;
  }
  
  .logo {
    font-size: 24px;
    font-weight: bold;
  }
  
  .search-input {
    width: 200px;
    margin-right: 10px;
  }
  
  /* 其他样式保持不变 */
  
  .book-title {
    margin-top: 15px;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  
  .book-last-read,
  .book-last-read-time,
  .book-added-time {
    font-size: 14px;
    color: #ab9f9f;
    margin-bottom: 3px;
  }
  .time {
    color: black;
  }
  .time1 {
    color: #3c3b3b;
  }
  
  .book-last-read-content {
    font-size: 14px;
    color: #333;
    line-height: 1.5;
  }
  </style>